<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录页</title>
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/c/font_4263150_ffoquuf2kls.css">
    <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
    <script src="/bootstrap/js/jquery-3.7.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>

    <style>
        * {
            box-sizing: border-box;
        }
        body {
            margin: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-family: 'Lato',sans-serif;
            font-weight: 300;
            background: linear-gradient(to left bottom,#e9e9e9,#ebebeb,#d6d6d6,#b1b1b1,#505050);
        }
        .login-div {
            filter: blur(0.4px);
            width: 500px;
            height: 100%;
            padding: 60px 35px 35px 35px;
            border-radius: 10px;
            background: radial-gradient(circle,#ffcc00,#ffcc33,#ffcc66,#ffcc99,#ffcccc);
            box-shadow:
                /* bottom shadow */
                    0px 20px 20px rgba(0, 0, 0, 0.2),
                    0px 5px 10px rgba(0, 0, 0, 0.2),
                        /* long bottom shadow */
                    0px 70px 50px rgba(0, 0, 0, 0.4),
                        /* right shadow */
                    30px 50px 50px rgba(0, 0, 0, 0.2),
                        /* left shadow */
                    -30px 50px 50px rgba(0, 0, 0, 0.2),
                        /* right inset */
                    inset 20px 0px 60px rgba(0, 0, 0, 0.1),
                        /* left inset */
                    inset 20px 0px 60px rgba(0, 0, 0, 0.1);
        }
        .logo {

            background-image: url("/image/星球.mp4");
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 0 auto;
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);

        }
        .title {
            text-align: center;
            font-size: 28px;
            padding-top: 24px;
            letter-spacing: 0.5px;
        }
        .sub-title {
            text-align: center;
            font-size: 15px;
            padding-top: 7px;
            letter-spacing: 3px;
            text-transform: uppercase;
            font-weight: bold;
        }
        .fields input {
            border: none;
            outline: none;
            background: none;
            font-size: 18px;
            font-family: 'Lato',sans-serif;
            color: white;
            padding: 10px 10px 10px 5px;
        }
        .username,.password {
            display: block;
            border-bottom: 1px solid #b3b3b3;
            margin-bottom: 30px;
        }
        ::placeholder {
            color: white;
            /* opacity: 1; 不透明度*/
            font-size: 20px;
            font-weight: 300;
        }
        /* ::-ms-input-placeholder {
         color: white;
         font-size: 20px;
         font-weight: 300;
        } */
        .signin-button {
            outline: none;
            border: none;
            cursor: pointer;
            width: 100%;
            height: 60px;
            margin-top: 30px;
            border-radius: 5px;
            font-size: 22px;
            font-family: 'Lato',sans-serif;
            color: white;
            text-align: center;
            letter-spacing: 1px;
            background: radial-gradient(circle,#24cfaa,#26c5a3,#28bb9c,#29b294,#2aa88d);
            box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
        }
        .signin-button:hover {
            background: radial-gradient(circle,#2fdbb6,#32d6b3,#32c9a8,#36c7a7,#38bb9f);
        }
        .signin-button:active {
            background: radial-gradient(circle,#1da88a,#1ea084,#229c82,#23947b,#238d76);
        }
        .link {
            padding-top: 20px;
            text-align: center;
        }
        .link a {
            text-decoration: none;
            color: white;
            font-size: 20px;
        }
        .fields i {
            height: 22px;
            margin-bottom: -3px;
            margin-right: 10px;
        }
        .right-img {

            background-image: url(/image/侧颜.png);
            background-repeat: no-repeat;
            background-size: cover;
            width: 50%;
            height: 100%;
        }
        .left-img {
            background-image: url(/image/黑发女孩.png);
            background-repeat: no-repeat;
            background-size: cover;
            width: 50%;
            height: 100%;
        }
    </style>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">



</head>
<body>
<div class="left-img"></div>
<div class="login-div">
    <div class="logo"> <video src="/image/星球.mp4" width="100" height="100" loop muted autoplay ></video></div>
    <div class="title">Red Stapler</div>
    <div class="sub-title">Beta</div>
    <div class="fields">
        <div class="username">
            <i class="iconfont icon-duanxin" ></i>

            <input type="username" class="user-input" id="num" placeholder="Username">
        </div>
        <div class="password">
            <i class="iconfont icon-quanxian"></i>
            <input type="password" class="pass-input" id="password" placeholder="Password">
        </div>
    </div>
    <button class="signin-button" onclick="login();">LOG IN</button>
    <div class="link"> <a href="#">Forgot password?</a></div>
</div>
<div class="right-img"></div>


<script type="text/javascript">
    function login(){

        let num=$("#num").val();

        let password=$("#password").val();

        $.ajax({
            url: "/webapi/login/user",
            data: {
                num: num,
                password: password
            }
        }).done(function (rs){
            if (rs>=0){
                //成功

                window.location.href="/list";
            }else {

                alert("出错了，错误的用户名和密码!");
            }
        });
    }
</script>













</body>
</html>